<template>
  <div style="height: 100%; display: flex;">
    <div class="left">
      <div class="avatar">
        <el-avatar :size="60" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
      </div>
      <div class="menu-item" @click="openCalendarWindow">
        <div>
          <img src="../assets/menu_icon_calendar.png">
        </div>
        <div>
          <span>日程</span>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="title-bar">
        <div class="right">
          <img @click="minimize" src="../assets/icon_minimize_gery.png">
          <img @click="close" src="../assets/icon_close_gery.png">
        </div>
      </div>
      <div>
        <router-view/>
      </div>
    </div>
  </div>

</template>
<script>
const { ipcRenderer } = require('electron')
export default {
  name: 'Home',
  mounted () {
    this.changeWindowSize()
    this.$router.push('DemoTest')
  },
  methods: {
    changeWindowSize () {
      ipcRenderer.send('changWindowSize')
    },
    minimize () {
      ipcRenderer.send('minimize')
    },
    close () {
      ipcRenderer.send('close')
    },
    openCalendarWindow () {
      ipcRenderer.send('openCalendarWindow')
    }
  }
}
</script>
<style lang="stylus" scoped>
.left
  width 80px
  height 100%
  background-color #409EFF
.left .avatar
  margin-top 20px
.left .menu-item
  margin-top 20px
  opacity 0.6
.left .menu-item:hover
  opacity 1
.left .menu-item span
  color white
  font-size 14px
.main
  flex 1
.title-bar
  height 50px
  -webkit-app-region: drag // 可拖动
.title-bar .right
  position: absolute
  right: 0
  top: 0
  -webkit-app-region: no-drag // 不可拖动
.title-bar .right img
  width 16px
  height 16px
  margin-top 15px
  margin-right 15px
</style>
